<template>
  <div class="topTitleList">
    <el-scrollbar>
      <div class="scrollbar-flex-content">

        <div :class="['scrollbar-demo-item', index == currentIndex && 'active']"
          v-for="(titleOne, index) in chartsTitleList" :key="titleOne.id||titleOne.categoryId" @click="emits('onClickTitle1',index,titleOne.categoryId)">
          <div class="text">{{ titleOne.name||titleOne.categoryName }}</div>
          <div class="border"></div>
        </div>

      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import type { DataType } from "../../api/chartsApi"

defineProps<{
  chartsTitleList:DataType[],
  currentIndex:number
}>()

const emits = defineEmits<{
  (e:'onClickTitle1',v:number,id?:number):void
}>()

</script>

<style scoped lang="less">
.topTitleList {
  width: 375px;

  .scrollbar-flex-content {
    display: flex;
    font-size: 16px;
    color: #999;
  }

  :deep(.el-scrollbar__bar.is-horizontal) {
    height: 0 !important;
  }


  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 40px;
    padding: 5px 10px;

    &.active {
      font-size: 22px;
      color: #333;

      .border {
        background-color: #f86442;
      }
    }

    .text {
      height: 28px;
      line-height: 28px;
      vertical-align: baseline;
    }

    .border {
      width: 26px;
      height: 4px;
      border-radius: 5px;
    }
  }
}
</style>